/*body{overflow: hidden;}*/
.loadMask{top: 0;z-index: 100;background-color: #000000;color: #ffffff;font-size: 24px;text-align: center;padding-top: 320px;}
main{min-width: 1000px;}

/*diy*/
.diy_nav{height: 90px;background-color:#191c26;}
.diy{/*padding: 60px 0;*/background-color: #252b39;color: #FFFFFF;}
.diy_contain{height: 720px;}

.diy_panel{left: 30px;top: 224px;height: 270px;width: 140px;border-radius: 6px;background-color: #3f4652;overflow: hidden;z-index: 2;box-shadow: 0 0 40px rgba(0,0,0,0.5);padding:5px 0 15px 0px;}
.diy_panel_model{height: calc(100% - 28px);}
.diy_panel_model>div{position: absolute;width: 100%;height: 100%;font-size: 14px;}
.diy_panel_scroll{width: 100%;height:172px;overflow: auto;text-align: center;}
.diy_panel_scroll::-webkit-scrollbar,.diy_svgs_scroll::-webkit-scrollbar{background-color: #3f4652;width: 6px;height: 0;}
.diy_panel_scroll::-webkit-scrollbar-thumb,.diy_svgs_scroll::-webkit-scrollbar-thumb{background-color: #535c6c;border-radius: 3px;}

/*.diy_panel_scroll li{height: 27px;line-height: 27px;background-color: #575c64;padding-left: 27px;border-radius: 27px;position: relative;}*/
/*.diy_panel_scroll li{width: 98px;margin-bottom: 3px;display: inline-block;text-align: left;cursor: pointer;}*/
.diy_panel_scroll li{display: inline-block;}
.diy_panel_scroll li.active,.color_title{background-color: #323842;}
.diy_panel_scroll li:last-child{margin-bottom: 0;}
.color_div{position: absolute;width: 14px;height: 14px;border-radius: 2px;top: 7px;right: 10px;}
li[data-color]{position: relative;}
li[data-color]::before,li[data-color]::after{content: '';position: absolute;opacity: 0;left: 0;top: 0;box-sizing: border-box;}
li[data-color]::before{width: 100%;height: 100%;border: 2px solid #444f58;}
li[data-color]::after{width: 24px;height: 24px;left: 2px;top: 2px;border: 2px solid #FFFFFF;}
li[data-color]:hover::before,li[data-color]:hover::after{opacity: 1;}

.diy_panel_name2 li{width: 108px;margin-left: 13px;text-align: left;display: inline-block;}
.diy_panel_name2 li>h2{color: #838d9e;font-size: 14px;font-weight: bold;line-height: 34px;padding-left: 3px;}
.diy_panel_name2 li>div{width: 98px;height: 27px;line-height: 27px;background-color: #575c64;padding-left: 12px;border-radius: 13.5px;position: relative;font-size: 15px;margin-bottom: 3px;}
.diy_panel_name2 li>div[data-name]{cursor: pointer;}
.diy_panel_name2 li>div[data-name]:hover,.diy_panel_name2 li>div[data-name].active{background-color: #323842;}

.diy_dialog{left: 175px;top: 224px;z-index: 2;}
/*.diy_dialog.active0 + .game,.diy_dialog.active1 + .game{left:0;}*/
.diy_dialog{visibility: visible;}
/*.diy_dialog.active0,.diy_dialog.active1{visibility: visible;}*/
.diy_dialog>div{width: 225px;height: 270px;background-color: #3f4652;border-radius: 6px;overflow: hidden;}
/*.diy_dialog>div,.diy_dialog.active0>div:last-child,.diy_dialog.active1>div:first-child{visibility: hidden;}*/
/*.diy_dialog.active0>div:first-child{visibility: visible;}
.diy_dialog.active1>div:last-child{visibility: visible;}*/
/*模块自定义弹框*/
.diy_svgs{height: 252px;background:#FFFFFF url(../../images/3d/bg_0.png);overflow: hidden;}
.diy_svgs>div{position: absolute;width: 100%;height: 100%;}
.diy_svgs svg{overflow: visible;}
.diy_svgs .svg_contain rect{stroke: #000000;}
/*.diy_svgs [data-active="true"]{stroke: #000000;stroke-width: 10;}*/

.tupxs{left: -100%;width: 100%;}
.qq_kefu{bottom: 0;left: 50%;margin-left: -102.5px;z-index: 2;cursor: pointer;}

/*use{cursor: pointer;}
path,rect,circle,polygon{cursor: default;}*/
.svg_contain{cursor: pointer;}
.svg_contain>svg{visibility: hidden;}
.svg_contain.active>svg{visibility: visible;}

.fontTest{position: absolute;z-index: 111;top: 100px;overflow: visible;outline: 1px solid red;visibility: hidden;}

.diy_svgs_tab{height: 36px;background-color: #efefef;text-align: center;}
.diy_svgs_tab>li{display: inline-block;cursor: pointer;width: 33.33%;padding-top: 11px;height: 100%;}
.diy_svgs_tab>li.active{background-color: #3f4652;border-top-left-radius: 6px;border-top-right-radius: 6px;}
.diy_svgs_li0,.diy_svgs_li1,.diy_svgs_li2{display: inline-block;background: url(../../images/3d/txt_1.png) no-repeat;height: 16px;}
.diy_svgs_li0{width: 50px;}
.diy_svgs_li1{width: 52px;background-position: -111px 0;}
.diy_svgs_li2{width: 56px;background-position: -220px 0;}
.active>.diy_svgs_li0{background-position: 0 -30px;}
.active>.diy_svgs_li1{background-position: -111px -30px;}
.active>.diy_svgs_li2{background-position: -220px -30px;}
.diy_svgs_div{height: calc(100% - 288px);padding-left: 25px;}
.diy_svgs_div>div{height: 100%;}
.diy_svgs_div h3{padding-top: 18px;padding-bottom: 14px;color: #FFFFFF;font-size: 14px;}
.diy_svgs_scroll{overflow: auto;width: 308px;}
.diy_svgs_scroll0{height: calc(100% - 80px);}
.diy_svgs_scroll1{height: calc(100% - 230px);}
.diy_svgs_scroll2{height: calc(100% - 140px);}
.diy_svgs_colors{width: 280px;}
.diy_svgs_colors>li{cursor: pointer;display: inline-block;}

.diy_dialog_name{width: 340px;background-color: #3f4652;border-radius: 6px;overflow: hidden;z-index: 2;right: 30px;top: 60px;bottom: 60px;}
.diy_panel_h2{margin-left: 15px;font-weight: normal;font-size: 14px;line-height: 38px;}
.name_select{color: #FFFFFF;margin-bottom: 8px;font-size: 14px;height: 29px;line-height: 27px;background: none;border:1px solid #ffffff;border-radius: 3px;width: 120px;margin-left: 10px;}
.name_select option{background-color:#3f4652;}

/*文字订制*/
.inputs_div{width: 280px;}
.text_family,.inputs{width: 100%;height: 36px;line-height: 36px;border-radius: 2px;background-color: #FFFFFF;font-size: 14px;padding: 0 0.4em;border: none;color: #000000;}
.ok_btn{top: 3px;right: 4px;cursor: pointer;}
.text_family{width: 280px;}

/*图片定制*/
.image_list>li{width: 85px;height: 85px;background-size: contain;background-repeat: no-repeat;background-position: center center;border-radius: 3px;overflow: hidden;cursor: pointer;display: inline-block;margin-right: 12px;border: 1px dashed #FFFFFF;margin-bottom: 12px;}
.image_list>li:last-child{background: url(../../images/3d/ico_6.png) no-repeat center center;}
.file_btn{display: block;cursor: pointer;}

/*颜色自定义弹框*/
.diy_dialog>div{position: absolute;}
.diy_dialog_color{/*height: calc(100% - 65px);*/padding-left: 13px;overflow: hidden;}
.diy_panel_color_scroll{overflow: hidden;height: auto;}
.color_close{float: right;margin-right: 15px;margin-top: 21px;cursor: pointer;}
/*.color_title{width: 285px;font-size: 15px;}*/
.diy_dialog_color>h2{font-size: 14px;color: #FFFFFF;/*padding: 24px 0 20px 0;*/line-height: 52px;font-weight: normal;}
.diy_dialog_color>.diy_panel_scroll{height: calc(100% - 72px);width: 208px;margin-left: 0;}
.colors_ul{width: 208px;text-align: left;}
.colors_ul>li,.diy_svgs_colors>li{width: 28px;height: 28px;border-radius: 0;margin-bottom: 5px;}
.colors_ul>li:last-child,.diy_svgs_colors>li:last-child{margin-bottom: 5px;}
.colors_ul>li{width: 20px;height: 20px;cursor: pointer;}
.colors_ul>li[data-color]::after{width: 18px;height: 18px;left: 1px;top: 1px;border: 1px solid #FFFFFF;}
.btns{width: 280px;border-top: 1px solid #363e4e;padding-top: 22px;}
.btns>img{display: inline-block;cursor: pointer;}
.cancel_btn{margin-right: 10px;}

/*3d*/
.game{width:650px;margin-left: 50%;background-color: #252b39;left: -325px;cursor: pointer;top: 0;}
.game_tishi{bottom: 144px;left: 50%;margin-left: -15px;}
.game_btns{bottom: 62px;left: 50%;margin-left: -144px;}
.game_btns>a{display: inline-block;font-size: 14px;font-family: "微软雅黑";text-align: center;width: 140px;line-height: 48px;color: #FFFFFF;border: 1px solid #535c6c;border-radius: 24px;transition: 500ms;}
.game_btns>a:hover{background-color: #ffffff;color: #000000;}
.reset_btn{margin-right: 8px;}

.text_svg{position: absolute;opacity: 0;left: -200%;z-index: 20;top: 100%;}
.load_svg{position: absolute;opacity: 0;left: -200%;width: 512px;height: 512px;top: 100%;z-index: 20;}
.canvas0,.canvas1{transform-origin: left top;transform: scale(0.5, 0.5);position: absolute;z-index: 111;}
.canvas0{display: none;}
.canvas1{display: none;}

.tishidialog{border-radius: 6px;background-color: rgba(0,0,0,0.7);width: 300px;padding: 20px 47px;left: 50%;top: 50%;margin-left: -150px;margin-top: -50px;display: none;}
.tishidialog_icon,.tishidialog_div{display: inline-block;vertical-align: middle;}
.tishidialog_icon{margin-right: 15px;}
.tishidialog_div{font-size: 12px;color: #FFFFFF;width: 140px;}

.saveImages{position: absolute;}

.calc_img{visibility: hidden;transform: translate(-100%,0);}

/*推荐设计*/
.left_btn,.right_btn{cursor: pointer;}
.designs_div,.designs_div>p{display: inline-block;}
.designs{height: 260px;}
.contain{width: 1040px;position: relative;margin: 0 auto;}
.designs_title{margin: 0 auto 20px auto;}
.designs_auto{width: 994px;height: 260px;margin: 0 auto;overflow: hidden;}
.designs_play{width: 100%;position: absolute;}
.designs_div{width: 190px;text-align: center;margin-right: 11px;}
.designs_div:last-child{margin-right: 0;}
.designs_div>img{width: 100%;}
/*.designs_div>img{width: 200%;margin-left: -50%;margin-top: -20%;}*/
.designs_div>p{text-align: left;font-size: 15px;line-height: 2;}
.clothes_name{color: #444f58;}
.clothes_price{color: #99999a;}
.left_btn,.right_btn{top: 80px;}
.left_btn{left: 0;}
.right_btn{right: 0;}

.wodzz1_mask img,.woddz_mask img{display: inline-block;}
.wodzz1_mask,.woddz_mask{font-size: 16px;}

.google_tishi{background-color: #ffffff;}
.google_tishi>img{margin: 0 auto;}
